
<template>
  <div>
    <div class="title">
      <div class="serve">
        <div class="name">点位搜索:</div>
        <div>
          <el-input v-model="search.name" placeholder="请输入内容"></el-input>
        </div>
      </div>
      <div class="serve">
        <div class="name">区域搜索:</div>
        <el-select v-model="search.regionId" filterable placeholder="请选择">
          <el-option
            v-for="item in list"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div class="btn">
        <el-button type="primary" icon="el-icon-search" size="medium" @click="sever">搜索</el-button>
      </div>
    </div>
    <div class="main">
      <div class="top-btn">
        <el-button
        @click="addFn"
          type="warning"
          icon="el-icon-circle-plus-outline"
          size="medium"
          >新建</el-button
        >
      </div>
      <div class="count">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column fixed prop="index" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="name" label="点位名称" width="281">
          </el-table-column>
          <el-table-column prop="region.name" label="所在区域" width="260">
          </el-table-column>
          <el-table-column prop="businessType.name" label="商圈类型" width="260">
          </el-table-column>
          <el-table-column prop="ownerName" label="合作商" width="260">
          </el-table-column>
          <el-table-column prop="name" label="详细地址" width="260">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">
              <el-button @click.native.prevent="detail(scope.$index, tableData)" type="text" size="small"
              >
                查看详细
              </el-button>
              <el-button @click.native.prevent="revise(scope.$index, tableData)" type="text" size="small"
              >
                修改
              </el-button>
              <el-button style="color: red" @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <Detail :visible.sync="reg.detail" :find ="find"/>
    <Footer @next="next" @up="up" :number="number" :pageIndex="region.pageIndex"/>
     <Revise :visible.sync="reg.revise" :change ="this.reg.change" @abst="abst" style="width:35%"/>
  </div>
</template>

<script>
import Footer from '@/components/public/FtooTer.vue'
import Revise from '@/views/getLevel/components/getLevel-revise.vue'
import Detail from '@/views/getLevel/components/getLeve-detail.vue'
import { node, deletes, lop, search } from '@/api/getLevel/getLevel'
export default {
  components: {
    Footer,
    Revise,
    Detail
  },
  async created () {
    const { currentPageRecords } = await search({
      pageIndex: 1,
      pageSize: 100000
    })
    this.list = currentPageRecords
    this.Data()
  },
  methods: {
    // 新增
    async addFn () {
      this.reg.revise = true
      this.reg.change.show = false
    },
    // 删除(返回flase)
    async deleteRow (index, rows) {
      const res = await deletes(rows[index].regionId)
      this.Data()
      console.log(res)
    },
    // 修改
    async revise (index, rows) {
      this.reg.revise = true
      this.reg.change.show = true
      // console.log(rows[index])
      this.reg.change.name = rows[index].name
      this.reg.change.regionId = rows[index].region.id
      this.reg.change.businessId = rows[index].businessType.id
      this.reg.change.ownerName = rows[index].ownerName
      this.reg.change.reg = rows[index].name
      this.reg.change.id = rows[index].id
      this.reg.change.ownerId = rows[index].ownerId
      this.reg.change.addr = rows[index].addr
      this.reg.change.areaCode = rows[index].areaCode
      // 分割地址和详细地址
      this.reg.change.addr = this.reg.change.addr.split('-')
      this.reg.change.detail = this.reg.change.addr[3]
      this.reg.change.addr.splice(3, 1)
      this.reg.change.addr = this.reg.change.addr.join('/')
      // console.log(this.reg.change)
      // const res = await revise(rows[index].id)
      // console.log(res)
    },
    // 查看
    async detail (index, rows) {
      this.reg.detail = true
      this.find = await lop(rows[index].id)
      this.find.forEach(item => {
        if (item.vmStatus === 0) {
          item.vmStatus = '未投放'
        } else if (item.vmStatus === 1) {
          item.vmStatus = '运营中'
        } else if (item.vmStatus === 3) {
          item.vmStatus = '已撤机'
        }
        item.lastSupplyTime = item.lastSupplyTime.split('T')
        item.lastSupplyTime = `${item.lastSupplyTime[0]} ` + `${item.lastSupplyTime[1]}`
      })
      // console.log(this.find)
    },

    // 搜索
    async sever () {
      console.log(this.search.name, this.search.regionId)
      this.region.name = this.search.name
      this.region.regionId = this.search.regionId
      this.Data()
    },
    // 接口渲染页面
    async Data () {
      const res = await node(this.region)
      // console.log(res.currentPageRecords)
      this.tableData = res.currentPageRecords// 对获取的数据添加序号属性
      this.tableData.forEach((item, index) => {
      // 添加序号
        this.$set(item, 'index', index + 1 + ((this.region.pageIndex - 1) * 10))
      // this.$set(item, 'index', index + 1)
      })
      // 总页数
      this.number = res.totalCount
    },
    // 下一页
    next () {
      this.region.pageIndex++
      const res = this.region.pageIndex
      // 页数
      this.Data(res)
    },
    // 上一页
    up () {
      this.region.pageIndex--
      const res = this.region.pageIndex
      // 页数
      this.Data(res)
    },
    // 新增&查看
    abst () {
      this.Data()
    }
  },
  data () {
    return {
      // 增删改查
      reg: {
        detail: false,
        revise: false,
        change: {
          areaCode: '',
          addr: '',
          show: false,
          reg: '',
          id: '',
          name: '',
          regionId: '',
          businessId: '',
          ownerName: '',
          ownerId: '',
          detail: ''
        }
      },
      search: {
        name: '',
        regionId: ''
      },
      list: [],
      number: '', // 总条数
      tableData: [],
      options: [],
      // 页数
      region: {
        pageIndex: 1,
        pageSize: 10,
        name: '',
        regionId: ''
      },
      find: []
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  width: 100%;
  background-color: #fff;
  height: 9.5%;
  margin-bottom: 1.2%;
  display: flex;
  line-height: 64px;
  .serve {
    display: flex;
    margin-right: 10px;
    .name {
      width: 35%;
      font-size: 14px;
    }
  }
}
.main {
  height: 90%;
  width: 100%;
  background-color: #fff;
  .top-btn {
    display: flex;
    width: 100%;
    height: 7%;
    margin-left: 10px;
    margin-bottom: 16px;
    // background-color: red;
  }
  .count {
    height: 93%;
  }
}
</style>
